<template>
  <view class="introduction-page">
    <view :class="['fade-in-all', showAll ? 'show' : '']">
      <view class="content">
        <view class="section">
          <view class="settings-list">
            <view class="settings-item" @click="goTo('account')">
              <text>账号与安全</text>
            </view>
            <view class="settings-item" @click="goTo('notification')">
              <text>消息通知</text>
            </view>
            <view class="settings-item" @click="goTo('privacy')">
              <text>隐私设置</text>
            </view>
            <view class="settings-item" @click="clearCache">
              <text>清除缓存</text>
            </view>
            <view class="settings-item" @click="goTo('about')">
              <text>关于我们</text>
            </view>
          </view>
        </view>
        <view class="logout-section">
          <button class="logout-btn" @click="logout">退出登录</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showAll: false
    }
  },
  onReady() {
    setTimeout(() => {
      this.showAll = true;
    }, 50);
  },
  methods: {
    goTo(type) {
      // 这里可以根据 type 跳转到不同页面，示例：
      if (type === 'about') {
        uni.navigateTo({ url: '/pages/profile/about' });
      } else {
        uni.showToast({ title: '功能暂未开放', icon: 'none' });
      }
    },
    clearCache() {
      uni.showToast({ title: '缓存已清除', icon: 'success' });
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('isLogin');
            uni.removeStorageSync('userId');
            uni.showToast({ title: '已退出登录', icon: 'none' });
            setTimeout(() => {
              uni.reLaunch({ url: '/pages/login/login' });
            }, 500);
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.introduction-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}
.content {
  background-color: #fff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.section {
  margin-bottom: 25px;
}

.section-content {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  text-align: justify;
}
.fade-in-all {
  opacity: 0;
  transition: opacity 0.5s;
}
.fade-in-all.show {
  opacity: 1;
}
.settings-list {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.settings-item {
  padding: 16px 0 16px 10px;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}
.settings-item:last-child {
  border-bottom: none;
}
.logout-section {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.logout-btn {
  margin-bottom: 10px;
  width: 70%;
  align-self: center;
  background: #fff;
  color: #b22222;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: normal;
  padding: 7px 0;
  transition: background 0.2s, color 0.2s;
}
.logout-btn:active {
  background: #ffeaea;
  color: #e60012;
}
</style> 